<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/lbt.css">
    <title>Document</title>
</head>

<body>
    <!-- 头部 -->
    <div id="heard">
        <div class="heard hlogo">LOGO</div>
        <div class="heard hlogout">Log Out</div>
    </div>
    <!-- 导航栏 -->
    <div id="nav">
        <div class="nav">DASHBOARD</div>
        <div class="nav">PROJECTS</div>
        <div class="nav">CALENDAR</div>
        <div class="nav">MAILBOX</div>
        <div class="nav">SETTINGS</div>
    </div>
    <!-- 内容区 -->
    <div id="article">
        <!-- 轮播图 -->
        <div id="lbt">
            <div id="container">
                <ul class="parent" style="left: 0;">
                    <li><img src="./imge/1.png"></li>
                    <li><img src="./imge/2.png"></li>
                    <li><img src="./imge/3.png"></li>
                    <li><img src="./imge/4.png"></li>
                    <li><img src="./imge/5.png"></li>
                </ul>

                <div class="btnLeft">&lt;</div>
                <div class="btnRight">&gt;</div>
                <div class="modal">
                    <div class="dots">
                        <ul class="clearfix">
                            <li class="on"></li>
                            <li class="off"></li>
                            <li class="off"></li>
                            <li class="off"></li>
                            <li class="off"></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 待办区 -->
        <div id="todo">
            <div id="todo_heard">
                <span id="th1">Support Requests</span>
                <span id="th2">View All</span>
            </div>
            <div id="todo_foot">
                <table id="tf">
                    <tr>
                        <th>TIME</th>
                        <th>USER NAME</th>
                        <th>STATUS</th>
                    </tr>
                    <tr>
                        <td>9:45pm</td>
                        <td>info@design.com</td>
                        <td>
                            <div class="tbut">Solved</div>
                        </td>
                    </tr>
                    <tr>
                        <td>9:45pm</td>
                        <td>info@design.com</td>
                        <td>
                            <div class="tbut">Solved</div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <!-- 曲线数据图 -->
        <div id="data1"></div>
        <!-- 饼状图 -->
        <div id="data2"></div>
        <!-- 柱状图 -->
        <div id="data3"></div>
    </div>
    <!-- 底部 -->
    <div id="foot">
        <div class="foot">
            <div class="logo">LOGO</div>
        </div>
        <div class="foot">
            <p>NEWS</p>
            <p>CHANNELS</p>
            <p>OVERVIEW</p>
            <p>TIMEL INE</p>
        </div>
        <div class="foot">
            <p>SPORT</p>
            <p>CULTURE</p>
            <p>NATURE</p>
            <p>MUSIC</p>
        </div>
        <div class="foot">
            <p>WEATHER</p>
            <p>AUTOS</p>
            <p>LOCAL</p>
            <p>SHOP</p>
        </div>
        <div class="foot">
            <p>FUTURE</p>
            <p>FOOD</p>
            <p>EARTH</p>
            <p>TV</p>
        </div>
        <div class="foot">
            <p>TRAVEL</p>
            <p>RADIO</p>
        </div>
    </div>
    <script src="./js/index.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script>
        // 曲线数据图
        var charts1 = echarts.init(document.querySelector('#data1'));
        var option1 = {
            title: {
                text: '曲线图数据展示',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                areaStyle: {}
            }]
        };
        charts1.setOption(option1)

        // 饼状图
        var charts2 = echarts.init(document.querySelector('#data2'));
        var option2 = {
            title: {
                text: '饼状图数据展示',
                left: 'center'
            },
            series: [{
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [{
                        value: 150,
                        name: 'MON'
                    },
                    {
                        value: 345,
                        name: 'TUE'
                    },
                    {
                        value: 1048,
                        name: 'WED'
                    },
                    {
                        value: 735,
                        name: 'THU'
                    },
                    {
                        value: 580,
                        name: 'FRI'
                    },
                    {
                        value: 484,
                        name: 'SATs'
                    },
                    {
                        value: 300,
                        name: 'SUN'
                    }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        charts2.setOption(option2)

        // 柱状图
        var charts3 = echarts.init(document.querySelector('#data3'));
        var option3 = {
            title: {
                text: '柱状图数据展示',
                left: 'center'
            },
            xAxis: {
                data: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN']
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20, 15]
            }]
        };
        charts3.setOption(option3)
    </script>
    <script src="./js/echarts.js"></script>
</body>

</html>